// 动画的基本步骤
// 清空 canvas 再绘制每一帧动画之前，需要清空所有。清空所有最简单的做法就是 clearRect() 方法。

// 保存 canvas 状态 如果在绘制的过程中会更改 canvas 的状态(颜色、移动了坐标原点等),又在绘制每一帧时都是原始状态的话，则最好保存下 canvas 的状态

// 绘制动画图形这一步才是真正的绘制动画帧

// 恢复 canvas 状态如果你前面保存了 canvas 状态，则应该在绘制完成一帧之后恢复 canvas 状态。
let sun;
let earth;
let moon;
let ctx;
function init() {
  sun = new Image();
  earth = new Image();
  moon = new Image();

  sun.src = "a.jpg";
  earth.src = "b.jpg";

  moon.src = "c.jpg";

  ctx = canvas.getContext("2d");

  sun.onload = function () {
    draw();
  };
}
init();
function draw() {
  ctx.clearRect(0, 0, 300, 300); //清空所有的内容
  /*绘制 太阳*/
  ctx.drawImage(sun, 0, 0, 300, 300);

  ctx.save();
  ctx.translate(150, 150);

  //绘制earth轨道
  ctx.beginPath();
  ctx.strokeStyle = "rgba(255,255,0,0.5)";
  ctx.arc(0, 0, 100, 0, 2 * Math.PI);
  ctx.stroke();

  let time = new Date();
  //绘制地球
  ctx.rotate(
    ((2 * Math.PI) / 60) * time.getSeconds() +
      ((2 * Math.PI) / 60000) * time.getMilliseconds()
  );
  ctx.translate(100, 0);
  ctx.drawImage(earth, -12, -12);

  //绘制月球轨道
  ctx.beginPath();
  ctx.strokeStyle = "rgba(255,255,255,.3)";
  ctx.arc(0, 0, 40, 0, 2 * Math.PI);
  ctx.stroke();

  //绘制月球
  ctx.rotate(
    ((2 * Math.PI) / 6) * time.getSeconds() +
      ((2 * Math.PI) / 6000) * time.getMilliseconds()
  );
  ctx.translate(40, 0);
  ctx.drawImage(moon, -3.5, -3.5);
  ctx.restore();

  requestAnimationFrame(draw);
}
